import React from 'react';
import {Component} from 'react';
import "./index.css";
import Input from "../../Component/Input/Input";
import {Row, Icon} from "antd";
import Logo from "../../Common/svg/Logo";
import RoundButton from "../../Component/RoundButton/RoundButton";
import SvgPhone from "../../Common/svg/LoginPhone";
import SvgLock from "../../Common/svg/LoginLock";

import SMSSVG from "../../Common/svg/SMS";
import User from "../../Server/User";
import SMS from "../../Server/SMS";
import CheckUtil from "../../utils/CheckUtil";

export default class ForgetPSW extends Component {
    constructor(props){
        super();
        document.title="忘记密码";
        this.state={
            phone:"",
            hasSendSMS:false, //是否发送了验证码
            psw:"",//密码
            confirmPsw:"",//确认密码,
            time:60,
            timer:"",//计时器
            showInfo:"发送验证码",//按钮显示的内容,
            smsCode:"",//验证码
        }
    }
    forgetPSW(){
        if(this.Check()){
            User.UserForgetPassword(
                this.state.phone,
                this.state.smsCode,
                this.state.psw,
                this.state.confirmPsw)
            .then(response=>{
                console.log("success")
                this.SetErr("修改成功,即将跳转登录页面...");
                setInterval(()=>{
                    this.props.history.push('/login');
                },3000);
                console.log(response)
            },reject=>{
                console.log(reject)
                this.SetErr(reject.msg);
                return false;
            });
        }
        // User.SelectUserInformation("672496714979999744");
        // Consulting.consultingBannerContent();
        // SMS.SendSms("13812071740");
        // this.props.history.replace("/UserProfile");
    }
    //更新手机号码
    ChangePhone(e){
        let value=e.target.value;
        if(value.length>11){
            return;
        }
        this.setState({
            phone:value
        })
    }
    //发送验证码
    SendSMS(){
        // this.TimeTick();
        // return;
        
        if(this.CheckPhone()){
            this.setState({
                showInfo:"发送中",
            });
            SMS.SendSms(this.state.phone)
            .then(response=>{
                this.setState({
                    hasSendSMS:true,
                    time:60
                },()=>{
                    let timerTick=setInterval(() => {
                        let count=this.state.time
                            if(count>0){
                                this.setState({
                                    showInfo:count.toString(),
                                    time:count-1
                                })
                            }
                            else{
                                clearInterval(this.state.timer)
                                this.setState({
                                    showInfo:"发送验证码",
                                    time:60
                                })
                            }
                        }, 1000);
                        this.setState({
                            timer:timerTick
                        })
                });

            },reject=>{
                this.setState({
                    showInfo:"发送失败",
                })
            });
        }
    }
    ClearErr(){
        this.setState({
            err:""
        });
    }
    SetErr(value){
        this.setState({
            err:value
        });
    }
    CheckPhone(){
        this.ClearErr();
        if(!CheckUtil.CheckPhone(this.state.phone)){
            this.SetErr("手机号码错误");
            return false;
        }
        return true;
    }
    Check(){
        this.ClearErr();
        let checkPhone=CheckUtil.CheckPhone(this.state.phone);
        let checkPsw=CheckUtil.CheckPsw(this.state.psw,this.state.confirmPsw);
        let checkBtn=this.state.hasSendSMS;
        if(checkPhone===false){
            this.SetErr("手机号码错误");
            return false;
        }
        if(checkBtn===false){
            this.SetErr("请点击发送验证码");
            return false;
        }
        if(this.state.smsCode===""){
            this.SetErr("请输入验证码");
            return false;
        }
        if(checkPsw===false){
            this.SetErr("密码不符合要求");
            return false;
        }
        return checkPhone && checkPsw && checkBtn;
    }
    
    render() {
        let enableSMSBtn=this.state.hasSendSMS?"Register_SendBtn_Disable":"";
        return (
            <div className={"ForgetPSW_Main"}>
                <div className={"ForgetPSW_Panel forgetPSW"}>
                    <Row className={"ForgetPSW_Logo"}>
                        <Logo width="4rem" height="3rem"/>
                    </Row>
                    <div className="Register_Info Info_top">
                        <span><font color="red">*</font></span>
                        <span>如果您忘记登录密码，请发送验证码到您绑定的手机上， 并开始设置您的新密码。</span>
                    </div>
                    <Row className={"ForgetPSW_Input_Username"}>
                        <Input
                            type={"plain"}
                            placeholder={"手机号"}
                            prefix={<Icon component={SvgPhone}/>}
                            autoComplete={"username"}
                            value={this.state.phone}
                            onChange={(e)=>this.ChangePhone(e)}
                        />
                    </Row>
                    <Row className={"ForgetPSW_Input_Username"}>
                        <Input
                            type={"plain"}
                            placeholder={"输入验证码"}
                            prefix={<Icon component={SMSSVG}/>}
                            autoComplete={"username"}
                            value={this.state.smsCode}
                            onChange={(e)=>this.setState({smsCode:e.target.value})}
                            
                        />
                        <span  className={"Modal_Content_Code Register_SendBtn "+enableSMSBtn}
                         onClick={e=>this.SendSMS(e)}>{this.state.showInfo}</span>
                    </Row>
                    <div className="No_Get_Code">
                        <span>收不到验证码？</span>
                    </div>
                    <Row className={"ForgetPSW_Input_Password"}>
                        <Input
                            type={"password"}
                            placeholder={"设置登录密码"}
                            prefix={<Icon component={SvgLock}/>}
                            autoComplete={"current-password"}
                            value={this.state.psw}
                            onChange={(e)=>this.setState({psw:e.target.value})}
                        />
                    </Row>
                    <div className="Register_Info">
                        <span><font color="red">*</font></span>
                        <span>6-20个字符，必须包含字母和数字</span>
                    </div>
                    <Row className={"ForgetPSW_Input_Password"}>
                        <Input
                            type={"password"}
                            placeholder={"再次输入密码"}
                            prefix={<Icon component={SvgLock}/>}
                            autoComplete={"current-password"}
                            value={this.state.confirmPsw}
                            onChange={(e)=>this.setState({confirmPsw:e.target.value})}
                        />
                    </Row>
                    <div>
                        <span><font color="red">{this.state.err}</font></span>
                    </div>
                    <Row className={"ForgetPSW_Button"}>
                        <div  onClick={e=>this.forgetPSW(e)}>
                            <RoundButton text={"确认提交"}/>
                        </div>
                    </Row>
                </div>
            </div>
        );
    }
}